<template>
  <div>
    <el-button @click="viewFile(manifest_path)">查看 XML 文件</el-button>
    <el-button @click="downloadFile(manifest_path)">下载 XML 文件</el-button>
    <el-button @click="loadJavaFiles(dex_output_dir)">查看 Java 源码</el-button>
    <el-table :data="javaFiles" style="width: 100%">
      <el-table-column prop="name" label="文件/目录名" width="280">
        <template #default="scope">
          <el-link :underline="false" @click="handleClick(scope.row)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template #default="scope">
          <el-button size="mini" @click="viewFile(scope.row.path)" v-if="!scope.row.isDir">查看</el-button>
          <el-button size="mini" @click="downloadFile(scope.row.path)" v-if="!scope.row.isDir">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import {extract} from '@/apis/anay.js'

const route = useRoute();
const manifest_path = ref(null);
const dex_output_dir = ref(null);
const javaFiles = ref([]);

onMounted(async () => {
  const filepath = route.query.filepath; // 获取路由参数中的文件路径
  console.log(filepath);
  // loadInitialData(filepath);
  await extract(filepath)
  // axios.post('http://localhost:5000/extract', {filepath}).then(res=>{
  //   console.log(res.data)
  // }).catch(error=>{
  //   console.log(error)
  // })
});



// const loadInitialData = async (filepath) => {
//   try {
//     const response = await axios.post('http://localhost:5000/extract', {filepath});
//     manifest_path.value = response.data.manifest_path;
//     dex_output_dir.value = response.data.dex_output_dir;
//     loadJavaFiles(dex_output_dir.value); // 加载源码文件夹的内容
//   } catch (error) {
//     console.error(error);
//     ElMessage.error('无法提取文件信息');
//   }
// };
const loadInitialData = async (filepath) => {
  try {
    // 使用GET请求，并通过查询字符串传递filepath
    const response = await axios.get(`http://localhost:5000/extract`, { params: { filepath } });
    manifest_path.value = response.data.manifest_path;
    dex_output_dir.value = response.data.dex_output_dir;
    loadJavaFiles(dex_output_dir.value); // 加载源码文件夹的内容
  } catch (error) {
    console.error(error);
    ElMessage.error('无法提取文件信息');
  }
};

const handleClick = (file) => {
  if (file.isDir) {
    loadJavaFiles(file.path);
  } else {
    viewFile(file.path);
  }
};

const loadJavaFiles = (path) => {
  axios.get(`http://localhost:5000/list/${path}`)
      .then(response => {
        javaFiles.value = response.data.files;
      })
      .catch(error => {
        console.error(error);
        ElMessage.error('无法加载目录');
      });
};

const viewFile = (filepath) => {
  axios.get(`http://localhost:5000/view/${filepath}`)
      .then(response => {
        ElMessage({
          message: response.data.content,
          type: 'info',
          duration: 5000
        });
      })
      .catch(error => {
        console.error(error);
        ElMessage.error('无法查看文件');
      });
};

const downloadFile = (filepath) => {
  window.location.href = `http://localhost:5000/download/${filepath}`;
};
</script>